<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-19 15:40:51
 * @LastEditors: your name
 * @LastEditTime: 2021-06-24 14:07:07
 * @Description: file content
-->
<template>
  <div>
    <el-button type="primary" @click="handleCreate">
      新建
    </el-button>

    <el-table
      ref="table"
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
      highlight-current-row
    >
      <el-table-column prop="ruleCode" label="规则编码"/>
      <el-table-column prop="ruleName" label="规则名称"/>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '禁用' : '启用' }}
        </template>
      </el-table-column>
      <el-table-column prop="relBusinessMethods" label="关联业务方法">
        <template slot-scope="scope">
          {{ scope.row.relBusinessMethods }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="规则说明"/>
      <el-table-column prop="createBy" label="创建人"/>
      <el-table-column prop="createDate" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="modifyBy" label="更新人"/>
      <el-table-column prop="modifyDate" label="更新时间">
        <template slot-scope="scope">
          {{ scope.row.modifyDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="actions" label="操作" width="180">
        <template slot-scope="scope">
          <span class="table-actionItem">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </span>

          <span class="table-actionItem">
            <el-popconfirm
              title="确定要删除该规则吗？"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button class="link-danger" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </span>
          <span v-if="scope.row.status === 0" class="table-actionItem">
            <el-popconfirm
              title="确定要启用规则吗？"
              placement="top"
              @confirm="changeStatus(scope.row, 1)"
            >
              <el-button type="text" slot="reference">启用</el-button>
            </el-popconfirm>
          </span>
          <span v-if="scope.row.status !== 0" class="table-actionItem">
            <el-popconfirm
              title="确定要禁用该规则吗？"
              placement="top"
              @confirm="changeStatus(scope.row, 0)"
            >
              <el-button class="link-danger" type="text" slot="reference">禁用</el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <RuleForm ref="RuleForm" :modelInfo="modelInfo" @ok="loadData(pageData.pageNo)"/>
  </div>
</template>

<script>
import {
  getModelvalidationrulePageList,
  deleteModelvalidationrule,
  putModelvalidationruleDisable,
  putModelvalidationruleEnable,
  getModelvalidationruleInfo,
  putModelvalidationrule,
  postModelvalidationrule
} from '@/apis/paas/HmModelValidationRuleController.js'
import { copy } from '@/utils/util'
import RuleForm from './RuleForm'

export default {
  name: 'RuleList',
  components: {
    RuleForm
  },

  props: {
    modelInfo: {
      type: Object,
      default: () => {
      }
    }
  },

  data () {
    return {
      copy,
      loading: false,
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      tableData: [],
      total: 0
    }
  },

  methods: {
    init () {
      this.loadData()
      // if (this.total === 0) {
      //   this.loadData()
      // }
    },

    loadData (pageNo = this.pageData.pageNo) {
      getModelvalidationrulePageList({
        ...this.pageData,
        pageNo,
        modelId: this.modelInfo.id
      }).then(res => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1)
          return
        }
        this.tableData = res.data
        this.total = res.totalCount
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo
        }
      })
    },
    handleCreate () {
      this.$refs.RuleForm.addForm()
    },

    handleEdit (record) {
      this.$refs.RuleForm.editForm({
        ...record
      })
    },

    handleDelete (record) {
      deleteModelvalidationrule([record.id]).then(res => {
        this.loadData()
        this.$message.success('操作成功')
      })
    },
    changeStatus (record, flag) {
      let api = putModelvalidationruleDisable
      if (flag === 1) {
        api = putModelvalidationruleEnable
      }
      api({ id: record.id }).then(() => {
        this.loadData()
        this.$message.success('操作成功')
      })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
